<!-- 奖品列表弹窗 -->
<!--XXX 已弃用，考虑删除 -->
<template>
  <with-mask :is-show="true">
    <div class="container">
      <!-- 边框装饰 -->
      <div class=" border-decorate">
        <!-- 阳光 -->
        <image
          class="sunshine"
          src="https://ustatic.hudongmiao.com/joymew-host-contest/lottery-sunshine.png"
          alt=""
        />
        <!-- 礼物 -->
        <image
          class="cloud"
          src="https://ustatic.hudongmiao.com/joymew-host-contest/lottery-cloud.png"
          alt=""
        />
      </div>
      <!-- 奖品一览 -->
      <div class="prize-list">
        <!-- 标题 -->
        <div class="title">
          <text class="title-text">
            奖品一览
          </text>
          <image
            class="title-img"
            src="https://ustatic.hudongmiao.com/joymew-host-contest/lottery-prize-list-title-bg.png"
            alt=""
          />
        </div>
        <!-- 奖品列表内容 -->
        <div class="content">
          <div
            v-for="prize in prizeList"
            :key="prize.id"
            class="prize"
          >
            <image
              class="prize-img"
              :src="prize.img"
            />
          </div>
        </div>
        <!-- 抽一次按钮 -->
        <div
          class="draw-btn"
          @click="draw"
        >
          抽一次
        </div>
      </div>
      <!-- 关闭按钮 -->
      <div
        class="close-btn"
        @click="close"
      >
        <image
          class="close-btn-img"
          src="@/static/icons/common/close.png"
          alt=""
        />
      </div>
    </div>
  </with-mask>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { onMounted } from 'vue';
import { useLottery } from '../../stores/lottery';

const lottery = useLottery();
// 奖品列表
const { prizeList } = storeToRefs(lottery);

// 挂载时获取奖品列表
onMounted(() => {
  lottery.getPrizeList();
});

const { changePopupType, toLottery } = lottery;

const close = () => {
  changePopupType('no');
};

const draw = () => {
  toLottery();
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;

  display: grid;
  grid-template:
    "prizeList" 1fr
    "closeBtn" 48px;
  row-gap: 20px;
  justify-items: center;

  // 边框装饰
  .border-decorate {
    position: absolute;
    top: -32.5641vw;
    left: 50%;
    z-index: -1;

    width: 65.1282vw;
    height: 60.2564vw;

    transform: translateX(-50%);

    // 阳光
    .sunshine {
      position: absolute;
      top: 0;
      left: 0;

      width: 100%;
      height: 100%;
    }

    // 礼物
    .cloud {
      position: absolute;
      top: 12.5641vw;
      left: 50%;

      width: 59.4872vw;
      height: 32.5641vw;

      transform: translateX(-50%);
    }
  }

  .prize-list {
    grid-area: prizeList;

    width: calc(73.8462vw - 24px);

    background: linear-gradient(180deg, #faf1e2, #f5e0c9 100%);
    border: 1px solid #fff;
    border-radius: 16px;

    padding: 0 12px;
    display: grid;
    grid-template:
      "title" 8.9744vw
      "." 12px
      "content" 1fr
      "." 24px
      "drawBtn" auto
      "." 33px;
    justify-items: center;

    // 标题
    .title {
      grid-area: title;
      align-self: self-start;

      position: relative;
      z-index: 1;

      width: 43.3333vw;
      height: 8.9744vw;

      text-align: center;

      // 标题文字
      .title-text {
        font-size: 5.1282vw;
        font-weight: 500;
        line-height: 8.9744vw;
        color: #fff;
      }

      // 标题背景
      .title-img {
        position: absolute;
        top: 0;
        left: 50%;
        z-index: -1;

        width: 100%;
        height: 100%;

        transform: translateX(-50%);
      }
    }

    // 内容
    .content {
      grid-area: content;

      height: 57.4359vw;
      overflow: scroll;

      display: grid;
      grid-template-rows: repeat(4, 1fr);
      grid-template-columns: repeat(3, 1fr);
      gap: 7px;

      &::-webkit-scrollbar {
        display: none;
      }

      // 奖品
      .prize {
        width: 21.2821vw;
        height: 21.2821vw;
        overflow: hidden;

        background: #fff;
        border-radius: 8px;

        .prize-img {
          width: 100%;
          height: 100%;
        }
      }
    }

    // 查看任务页按钮
    .draw-btn {
      grid-area: drawBtn;

      width: 53.3333vw;
      height: 12.3077vw;

      background: linear-gradient(103deg,
      #ff825e 0%,
      #ff6c87 100%,
      #f24ebd 100%);
      border-radius: 11.7949vw;

      font-size: 4.359vw;
      font-weight: 500;
      line-height: 12.3077vw;
      color: #fff;
      text-align: center;
    }
  }

  // 关闭按钮
  .close-btn {
    grid-area: closeBtn;

    width: 47px;
    height: 47px;

    .close-btn-img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
